<nz-modal [(nzVisible)]="isVisible"
           nzTitle="机构配置"
          [nzFooter]="null"
          (nzOnCancel)="handleCancel()"
>


  <nz-table>
    <thead>
    <tr>
      <th>
        对接模式配置
      </th>
      <th class="switch">
        <nz-switch [(ngModel)]="dockingStatus" [nzControl]="true" (click)="clickDockingStatus(item)"
                   nzCheckedChildren="开启" nzUnCheckedChildren="关闭"></nz-switch>
      </th>
    </tr>
    <tr>
      <th>
        卡片管理配置
      </th>
      <th class="switch">
        <nz-switch [(ngModel)]="cardStatus" [nzControl]="true" (click)="clickCardStatus(item)"
                   nzCheckedChildren="开启" nzUnCheckedChildren="关闭"></nz-switch>
      </th>
    </tr>
    <tr>
      <th>
        自定义网站品牌logo
      </th>
      <th class="switch">
        <nz-switch [(ngModel)]="customLogo" [nzControl]="true" (click)="clickCustomLogoStatus(item)"
                   nzCheckedChildren="自定义" nzUnCheckedChildren="默认"></nz-switch>
      </th>
    </tr>
    <tr *ngIf="customLogo">
      <th class="">
        <nz-upload
          class="avatar-uploader"
          [nzAction]="uploadUrl"
          [nzHeaders]="{ authorization: accessToken }"
          [nzData]="{type:7}"
          nzName="image"
          nzListType="picture-card"
          [nzShowUploadList]="false"
          (nzChange)="handleChange($event,'pcLogoFileName')"
        >
          <ng-container *ngIf="!pcLogoFileName">
            <i class="upload-icon" nz-icon [nzType]="pcLogoFileNameLoading ? 'loading' : 'plus'"></i>
            <div class="ant-upload-text">电脑端logo</div>
          </ng-container>

          <div *ngIf="pcLogoFileName">
            <nz-badge [nzCount]="iconTemplate" (click)="closeImage('pcLogoFileName')">
              <img (click)="img($event)"  nz-image [nzSrc]="serverFileUrl + pcLogoFileName"
                   width="104px"
                   height="104px"/>
            </nz-badge>
          </div>

          <ng-template #iconTemplate>
            <i nz-icon nzType="close-circle" nzTheme="twotone" class="ant-scroll-number-custom-component icon-del" [nzTwotoneColor]="'red'"></i>
          </ng-template>

        </nz-upload>
      </th>
      <th class="">
        <nz-upload
          class="avatar-uploader"
          [nzAction]="uploadUrl"
          [nzHeaders]="{ authorization: accessToken }"
          [nzData]="{type:7}"
          nzName="image"
          nzListType="picture-card"
          [nzShowUploadList]="false"
          (nzChange)="handleChange($event,'mobileLogoFileName')"
        >
          <ng-container *ngIf="!mobileLogoFileName">
            <i class="upload-icon" nz-icon [nzType]="mobileLogoFileNameLoading ? 'loading' : 'plus'"></i>
            <div class="ant-upload-text">移动端logo</div>
          </ng-container>

          <div *ngIf="mobileLogoFileName">
            <nz-badge [nzCount]="iconTemplate" (click)="closeImage('mobileLogoFileName')">
              <img (click)="img($event)"  nz-image [nzSrc]="serverFileUrl + mobileLogoFileName"
                   width="104px"
                   height="104px"/>
            </nz-badge>
          </div>

          <ng-template #iconTemplate>
            <i nz-icon nzType="close-circle" nzTheme="twotone" class="ant-scroll-number-custom-component icon-del" [nzTwotoneColor]="'red'"></i>
          </ng-template>

        </nz-upload>
      </th>
    </tr>
    <tr>
      <th>
        采购设备收款配置
      </th>
      <th>
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzFor="name">收款人</nz-form-label>
          <nz-form-control [nzSpan]="16" nzErrorTip="请选择收款人">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择收款人" [(ngModel)]="this.payeeUserId"  [ngModelOptions]="{standalone: true}" (ngModelChange)="updateDevicePayeeAccount()">
              <nz-option  nzLabel="不配置" [nzValue]="0"></nz-option>
              <nz-option *ngFor="let item of devicePayeeAccountList" nzLabel="{{item.alias}}({{item.agencyNo}})" [nzValue]="item.userId"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </th>
    </tr>

    </thead>

  </nz-table>

</nz-modal>


